<template>
	<!-- 团队 -->
	<div id="team">
		<header class="mui-bar mui-bar-nav header">
			<div class="mui-icon mui-icon-left-nav mui-pull-left" @tap="$router.go(-1)"></div>
			<h1 class="mui-title">{{routerTitle}}</h1>
		</header>
		<div class="mui-content">
			<pullRefresh @refresh="toRefresh">
				<div class="h-top">
					<button type="button" class="mui-btn mui-btn-danger" @tap="settlementTap">结算今日</button> 
				</div>
				<div v-if="showsecondTeamPer" class="order-list">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">伞下所有充值金额<span class="mui-badge mui-badge-danger">{{team.allAddMoney}}</span>
						</li>
						<li class="mui-table-view-cell">伞下所有提现金额<span class="mui-badge mui-badge-warning">{{team.allWithdraw}}</span>
						</li>
						<li class="mui-table-view-cell">伞下余额总和：<span class="mui-badge mui-badge-purple">{{team.allBalance}}</span></li>
					</ul>
				</div>
			</pullRefresh>
		</div>
	</div>
</template>

<script>
	import pullRefresh from "@/components/pullRefresh"
	import {
		secondSettlementTeam,
		settlement
	} from "@/api/my"
	export default {
		name: "team",
		components: {
			pullRefresh
		},
		data() {
			return {
				showsecondTeamPer:false,
				team: {
					allAddMoney: 0,
					allWithdraw: 0,
					username: 0
				},
			}
		},
		computed:{
			secondTeamPer(){
				return this.$route.query.secondTeamPer
			}
		},
		mounted() {
			if(this.secondTeamPer!=0){
				this.getSecondSettlementTeam()
			}
		},
		methods: {
			getSecondSettlementTeam(callback) {
				mui.showLoading("等待中..", "div");
				secondSettlementTeam().then(res => {
					this.team = res
					this.showsecondTeamPer = true
					mui.hideLoading()
					callback && callback()
				})
			},
			settlementTap(){
				settlement().then(res=>{
					mui.hideLoading()
					if(res==200){
						mui.toast("结算成功")
					}else if(res.message){
						mui.toast(res.message)
					}else{
						mui.toast("系统错误")
					}
				})
			},
			toRefresh(callback) {
				//这里进行重新加载数据操作
				if(this.secondTeamPer!=0){
					this.getSecondSettlementTeam(() => {
						callback()
					})
				}else{
					callback()
				}
			}
		}
	}
</script>

<style scoped>
	header.mui-bar {
		display: flex;
		justify-content: space-between;
	}

	li.mui-table-view-cell {
		text-align: left;
	}

	.directUser {
		display: inline-block;
		margin: 4vw 3vw 0 0;
		background: #009688;
		padding: 0 2vw;
		line-height: 7vw;
		color: #fff;
		border-radius: 4vw;
	}
	.h-top{width: 100%; background-color: #ff9934;  padding: 5% 0 8% 0;}
</style>
